var timer
var datachange = []

export default {
//    data: {
//        option: {
//            chartZone: [60,60,300,300], //图表左上角与右下角坐标数组
//            yAxisLable: [1,2,3,4], //Y轴内容
//            yMax: 5, //Y轴最大值
//            guideLine: true, //是否存在辅助线
//            dataPoint: true, //是否存在数据点
//            xAxisLable: [0,1,2,3,4,5,6], //x轴内容
//            data: [1,2,3,4, 2,4], //数据内容
//            data2: [3,4,2,1,3,2],
//            lineStyle: {
//                line_width: 2, //数据条的宽
//                color: '#1abc9c', //折线的颜色
//                radius: 1 //数据点半径
//            },
//            axisArrow: {
//                size: 2, //箭头因子大小
//                color: 'red' //箭头填充色
//            },
//            dataStyle: {
//                radius: 5,
//                color: "#ee6587"
//            }
//        },
//    },
//    onShow() {  // 生命周期函数--监听页面显示，当页面启动，或从后台进入前台显示，会触发 onShow
//        this.draw()
//    },

    onInit() {
        timer = setInterval(this.draw, 1000)
        console.info('使用折线图工具定时器')
    },

    onHide() {
        clearInterval(timer)
        console.info('停止折线图工具定时器')
    },

    draw() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');

        // 当数据更新时重新绘制
        if (datachange != []) {
            context.beginPath()
            for (var k = 0; k < this.option.data.length; k++) {
                if(Number(datachange[k]) != Number(this.option.data[k])) {
                    context.save()
                    context.clearRect(this.option.chartZone[0], this.option.chartZone[1] - 20, this.option.chartZone[2], this.option.chartZone[3])
                    context.restore()
                }
            }
        }

        this.drawAxis()
        this.drawYLables()
        this.drawXLables()
        this.drawData()
        this.drawArrowX()
        this.drawArrowY()
    },
    //绘制X，Y坐标轴
    drawAxis() {
        let chartZone = this.option.chartZone
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
//        context.save()
        context.lineWidth = 4
        context.strokeStyle = '#353535'
//        context.beginPath()
        context.moveTo(chartZone[0], chartZone[1])
        context.lineTo(chartZone[0], chartZone[3])
        context.lineTo(chartZone[2], chartZone[3])
        context.stroke()

        // 显示横纵坐标名称
        context.font = '20px sans-serif'; // 字号和行高、子体系列
        var xwidth = context.measureText(this.option.xtext).width // 横坐标字长
        context.fillText(this.option.ytext, chartZone[0]-35, chartZone[1]-23); // 绘制填充类文本，纵轴
        context.fillText(this.option.xtext, chartZone[2]-xwidth+35, chartZone[3]+55); // 绘制填充类文本，横轴
        context.stroke() // 进行边框绘制操作
    },
    //绘制y轴坐标
    drawYLables() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        context.save()
        let labels = this.option.yAxisLable;
        let yLength = (this.option.chartZone[3] - this.option.chartZone[1]) * 0.95
        let gap = yLength / (labels.length - 1)
        let option = this.option
        labels.forEach(function (label, index) {
            //绘制坐标文字
            //offset为y轴上数据与y轴的距离
            let offset = context.measureText(label).width + 20
            context.strokeStyle = '#eaeaea';
            context.font = "16px"
            context.fillText(label, option.chartZone[0] - offset, option.chartZone[3] - index * gap + 5);
            //绘制小间隔
            context.strokeStyle = '#353535';
            context.beginPath();
            context.lineWidth = 5 // 线的粗细
            if(labels.length > index + 1) { // assessment/index/index.hml BUG
                context.moveTo(option.chartZone[0] - 10, option.chartZone[3] - (index + 1) * gap);
                context.lineTo(option.chartZone[0], option.chartZone[3] - (index + 1) * gap)
                context.stroke()
            }
//            context.moveTo(option.chartZone[0] - 10, option.chartZone[3] - (index + 1) * gap);
//            context.lineTo(option.chartZone[0], option.chartZone[3] - (index + 1) * gap)
//            context.stroke()
            context.restore() // 对保存的绘图上下文进行恢复
        })
    },
    //绘制x轴坐标
    drawXLables() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let labels = this.option.xAxisLable;
        let xLength = (this.option.chartZone[2] - this.option.chartZone[0]) * 0.90
        let gap = xLength / (labels.length-1)
        let option = this.option
        labels.forEach(function (label, index) {
            // 绘制坐标文字
            let offset = context.measureText(label).width
            context.save()
            context.strokeStyle = '#eaeaea';
            context.font = "18px"
            context.fillText(label, option.chartZone[0] + (index) * gap - offset / 2, option.chartZone[3] + 30);
            // 绘制小间隔
            context.beginPath();
            context.lineWidth = 5 // 线的粗细
            context.strokeStyle = '#353535';
            for(var i = 1; i < labels.length; i++) {
                context.moveTo(option.chartZone[0] + i * gap, option.chartZone[3]);
                context.lineTo(option.chartZone[0] + i * gap, option.chartZone[3] + 10)
            }
            context.stroke()
            // 存储偏移量
            option.offsetXLabel = offset / 2
            context.restore() // 对保存的绘图上下文进行恢复
        })
    },
    //绘制数据
    drawData() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');

        for (let value in this.option.yAxisLable) {
            console.info(value)
            //                    this.objLine.data.push(Number(value))
            this.option.yAxisLable[value] = Number(this.option.yAxisLable[value])
        }

        // 将y轴内容改为数字形式
        var temp = this.option.yAxisLable[0] // 取得y轴数据中最大值
        for(var i = 0; i < this.option.yAxisLable.length; i++) {
            if (temp < this.option.yAxisLable[i+1]) {
                temp = this.option.yAxisLable[i+1]
            }
        }

        let data = this.option.data; // 数据点坐标
        let xLength = (this.option.chartZone[2] - this.option.chartZone[0]) * 0.90; //线段尾部留白后x轴长
        let gap = xLength / (this.option.xAxisLable.length - 1); // x轴间隙
        //缓存从数据值到坐标距离的比例因子
        let yFactor = (this.option.chartZone[3] - this.option.chartZone[1]) * 0.95 / temp
        let activeX = 0; // 记录绘制过程中当前点的坐标
        let activeY = 0; // 记录绘制过程中当前点的y坐标
//        context.strokeStyle = this.option.lineStyle.color || '#1abc9c';  // 设定折线的颜色
        context.strokeStyle = this.option.lineStyle.color;  // 设定折线的颜色
        context.lineWidth = this.option.lineStyle.line_width; // 设定折线的线宽
        context.save()

        // 绘制折线
        context.beginPath();
//        context.moveTo(this.option.chartZone[0], this.option.chartZone[3]); // 先将起点移动至0,0坐标
        context.moveTo(this.option.chartZone[0] + gap, this.option.chartZone[3] - data[0] * yFactor); // 先将起点移动至第一个点的坐标
        for (let i = 0; i < data.length; i++) {
            activeX = this.option.chartZone[0] + (i + 1) * gap;
            activeY = this.option.chartZone[3] - data[i] * yFactor;
            context.lineTo(activeX, activeY);
            context.stroke();
        }
        context.restore()
        context.save()

        // 绘制数据点辅助虚线
        context.strokeStyle = '#a29d9d'
        context.setLineDash([10, 20])
        context.beginPath()
        if (this.option.guideLine == true) {
            for (let i = 0; i < data.length; i++) {
                context.moveTo(this.option.chartZone[0], this.option.chartZone[3] - data[i] * yFactor)
                activeX = this.option.chartZone[0] + (i + 1) * gap;
                activeY = this.option.chartZone[3] - data[i] * yFactor;
                context.lineTo(activeX, activeY)
                context.lineTo(activeX, this.option.chartZone[3])
                context.lineTo(activeX, this.option.chartZone[3])
                context.stroke()
            }
        }
        // 绘制数据
        if (this.option.dataPoint == true) {
            for (let i = 0; i < data.length; i++) {
                activeX = this.option.chartZone[0] + (i + 1) * gap;
                activeY = this.option.chartZone[3] - data[i] * yFactor;
                context.fillStyle = this.option.dataStyle.color
                context.beginPath()
                context.arc(activeX, activeY, this.option.dataStyle.radius, 0, 2 * Math.PI, false)
                context.fill()
                context.closePath()
            }
        }
        context.restore()

        if(this.option.dataInfoShow == true) {
            context.beginPath()
            for (let i = 0; i < data.length; i++) {
                // 显示数值
                activeX = this.option.chartZone[0] + (i + 1) * gap;
                activeY = this.option.chartZone[3] - data[i] * yFactor;
                context.save()
                context.strokeStyle = 'yellow';
                context.font = "18px sans-serif"
                //            context.fillText(info, option.chartZone[0] + (index + 1) * gap - offset, option.chartZone[3] - 10 - height2[index]);
//                context.fillText(info, this.option.chartZone[0] + (index + 1) * gap - offset, this.option.chartZone[3] - 10 - height2[index]);
                context.fillText(this.option.dataInfo[i], activeX-10, activeY-10);
                context.restore() // 对保存的绘图上下文进行恢复
                //            context.stroke()
            }
        }
    },
    drawArrowX() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let factor = this.option.axisArrow.size;
        context.save()
        //        context.translate(this.option.chartZone[2], this.option.chartZone[3])
        context.beginPath()
        context.moveTo(this.option.chartZone[2], this.option.chartZone[3])
        context.lineTo(this.option.chartZone[2] + 2 * factor, this.option.chartZone[3] - 3 * factor)
        context.lineTo(this.option.chartZone[2] + 10 * factor, this.option.chartZone[3])
        context.lineTo(this.option.chartZone[2] + 2 * factor, this.option.chartZone[3] + 3 * factor)
        context.lineTo(this.option.chartZone[2], this.option.chartZone[3])
        context.globalAlpha = 0.7
        context.fillStyle = this.option.axisArrow.color
        context.fill()
        context.restore()
    },
    drawArrowY() {
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let factor = this.option.axisArrow.size;
        context.save()
        context.beginPath()
        context.moveTo(this.option.chartZone[0], this.option.chartZone[1])
        context.lineTo(this.option.chartZone[0] - 3 * factor, this.option.chartZone[1] - 2 * factor)
        context.lineTo(this.option.chartZone[0], this.option.chartZone[1] - 10 * factor)
        context.lineTo(this.option.chartZone[0] + 3 * factor, this.option.chartZone[1] - 2 * factor)
        context.lineTo(this.option.chartZone[0], this.option.chartZone[1])
        context.globalAlpha = 0.7
        context.fillStyle = this.option.axisArrow.color
        context.fill()
        context.restore()

        datachange = this.option.data
    },
}